<template>
<div>
  <slot name="search"></slot>
  <el-table :data="tableData" style="width: 100%">
    <!-- <template v-for="(item, index) in columns">
      <el-table-column
        v-if="!item.type"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      ></el-table-column>

      <el-table-column
        label="操作"
        v-else-if="item.type === 'oprate'"
        :key="index"
      >
        <template slot-scope="scope">
          <el-button size="mini">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </template> -->
    <el-table-column
      v-for="(item, index) in columns"
      :label="item.label"
      :prop="item.prop"
      :key="index"
    >
    </el-table-column>

    <slot name="operate"></slot>
  </el-table>

  <!-- 分页 -->
  <el-pagination
    v-if="page"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageConfig.currentPage"
    :page-sizes="pageConfig.pageSizes"
    :page-size="pageConfig.pageSize"
    :layout="pageConfig.layout"
    :total="pageConfig.total"
  >
  </el-pagination>
</div>
</template>

<script>

export default {
  props: {
    // 表格数据
    tableData: {
      require: true,
      type: Array,
      default: function () {
        return []
      }
    },
    // 控制渲染的列
    columns: {
      require: true,
      type: Array,
      default: function () {
        return []
      }
    },
    page: {
      type: Boolean,
      default: false
    },
    // 分页配置
    pageConfig: {
      type: Object,
      default: function () {
        return {
          currentPage: 1,
          pageSizes: [10, 20],
          pageSize: 10,
          layout: ' prev, pager, next',
          total: 0
        }
      }
    }
  },
  methods: {
    handleSizeChange (v) {
      this.$emit('size-change', v)
    },
    handleCurrentChange (v) {
      this.$emit('current-change', v)
    }
  }
}
</script>

<style>
</style>
